import React from 'react';
import { Typography, Container, Box, Paper, Card, CardContent, CardMedia, Grid, Chip, Fade, Grow } from '@mui/material';
import { styled, keyframes } from '@mui/material/styles';
import { PieChart, Pie, Cell, ResponsiveContainer, Legend, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';
import { Assessment, Psychology, Biotech, Analytics } from '@mui/icons-material';

// 模拟数据集统计信息
const datasetStats = [
  { name: '胶质瘤', shortName: 'Glioma', value: 1621, color: '#FF6B6B', description: '最常见的原发性脑肿瘤' },
  { name: '脑膜瘤', shortName: 'Meningioma', value: 1645, color: '#4ECDC4', description: '起源于脑膜的良性肿瘤' },
  { name: '无肿瘤', shortName: 'No Tumor', value: 2000, color: '#45B7D1', description: '正常脑部组织' },
  { name: '垂体瘤', shortName: 'Pituitary', value: 1757, color: '#96CEB4', description: '垂体腺体肿瘤' },
];

// 现代化配色方案 (用于图表)
// const COLORS = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4'];

// 动画关键帧
const fadeInUp = keyframes`
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
`;

const pulse = keyframes`
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
  }
`;

const shimmer = keyframes`
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
`;

const glow = keyframes`
  0%, 100% {
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(102, 126, 234, 0.6);
  }
`;

const float = keyframes`
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
`;

const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`;

const slideInUp = keyframes`
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
`;

// const shimmer = keyframes`
//   0% {
//     background-position: -200px 0;
//   }
//   100% {
//     background-position: calc(200px + 100%) 0;
//   }
// `;

// 主容器样式
const MainContainer = styled(Container)(({ theme }) => ({
  background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
  minHeight: '100vh',
  paddingTop: theme.spacing(4),
  paddingBottom: theme.spacing(4),
}));

// 主要内容纸张样式
const MainPaper = styled(Paper)(({ theme }) => ({
  background: 'linear-gradient(145deg, #ffffff 0%, #f8fafc 100%)',
  borderRadius: '24px',
  padding: theme.spacing(4),
  boxShadow: '0 20px 40px rgba(0,0,0,0.1), 0 0 0 1px rgba(255,255,255,0.05)',
  backdropFilter: 'blur(10px)',
  border: '1px solid rgba(255,255,255,0.2)',
  animation: `${fadeInUp} 0.8s ease-out`,
}));

// 标题样式
const GradientTitle = styled(Typography)(({ theme }) => ({
  background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
  WebkitBackgroundClip: 'text',
  WebkitTextFillColor: 'transparent',
  backgroundClip: 'text',
  fontWeight: 800,
  textAlign: 'center',
  marginBottom: theme.spacing(3),
  position: 'relative',
  '&::after': {
    content: '""',
    position: 'absolute',
    bottom: '-10px',
    left: '50%',
    transform: 'translateX(-50%)',
    width: '100px',
    height: '4px',
    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    borderRadius: '2px',
  },
}));

// 统计卡片样式
const StatsCard = styled(Card)(({ theme }) => ({
  background: 'linear-gradient(145deg, #ffffff 0%, #f8fafc 100%)',
  borderRadius: '24px',
  padding: theme.spacing(3),
  height: '100%',
  border: '1px solid rgba(255,255,255,0.3)',
  boxShadow: '0 8px 32px rgba(0,0,0,0.1), 0 0 0 1px rgba(255,255,255,0.05)',
  transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
  cursor: 'pointer',
  position: 'relative',
  overflow: 'hidden',
  backdropFilter: 'blur(10px)',
  '&::before': {
    content: '""',
    position: 'absolute',
    top: 0,
    left: '-100%',
    width: '100%',
    height: '100%',
    background: `linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent)`,
    transition: 'left 0.6s',
  },
  '&::after': {
    content: '""',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    background: 'linear-gradient(45deg, transparent 30%, rgba(102, 126, 234, 0.05) 50%, transparent 70%)',
    opacity: 0,
    transition: 'opacity 0.3s ease',
  },
  '&:hover': {
    transform: 'translateY(-12px) scale(1.03) rotateX(5deg)',
    boxShadow: '0 25px 50px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.1)',
    animation: `${glow} 2s ease-in-out infinite`,
    '&::before': {
      left: '100%',
    },
    '&::after': {
      opacity: 1,
    },
  },
}));

// 数据预处理方法卡片样式
const MethodCard = styled(Card)(({ theme }) => ({
  height: '100%',
  background: 'linear-gradient(145deg, #ffffff 0%, #f8fafc 100%)',
  borderRadius: '16px',
  padding: theme.spacing(2.5),
  border: '1px solid rgba(255,255,255,0.2)',
  boxShadow: '0 8px 32px rgba(0,0,0,0.08)',
  transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
  position: 'relative',
  overflow: 'hidden',
  '&::before': {
    content: '""',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    height: '4px',
    background: 'linear-gradient(90deg, #FF6B6B, #4ECDC4, #45B7D1, #96CEB4)',
    borderRadius: '16px 16px 0 0',
  },
  '&:hover': {
    transform: 'translateY(-4px)',
    boxShadow: '0 12px 40px rgba(0,0,0,0.15)',
  },
}));

// 样本图像网格卡片样式
const ImageCard = styled(Card)(({ theme }) => ({
  height: '100%',
  borderRadius: '20px',
  overflow: 'hidden',
  background: 'linear-gradient(145deg, #ffffff 0%, #f8fafc 100%)',
  border: '1px solid rgba(255,255,255,0.3)',
  boxShadow: '0 8px 32px rgba(0,0,0,0.1), 0 0 0 1px rgba(255,255,255,0.05)',
  transition: 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
  position: 'relative',
  backdropFilter: 'blur(10px)',
  '&:hover': {
    transform: 'translateY(-16px) rotateY(8deg) scale(1.02)',
    boxShadow: '0 25px 70px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.1)',
    animation: `${glow} 2s ease-in-out infinite`,
    '& .image-overlay': {
      opacity: 1,
    },
  },
}));

// 图像覆盖层
const ImageOverlay = styled(Box)(({ theme }) => ({
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  background: 'linear-gradient(135deg, rgba(102, 126, 234, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%)',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  opacity: 0,
  transition: 'opacity 0.3s ease',
  color: 'white',
  fontWeight: 'bold',
}));

// 图表容器
const ChartContainer = styled(Box)(({ theme }) => ({
  background: 'linear-gradient(145deg, #ffffff 0%, #f8fafc 100%)',
  borderRadius: '24px',
  padding: theme.spacing(3),
  border: '1px solid rgba(255,255,255,0.3)',
  boxShadow: '0 8px 32px rgba(0,0,0,0.1), 0 0 0 1px rgba(255,255,255,0.05)',
  height: '400px',
  backdropFilter: 'blur(10px)',
  transition: 'all 0.3s ease',
  '&:hover': {
    transform: 'translateY(-4px)',
    boxShadow: '0 12px 40px rgba(0,0,0,0.15)',
  },
}));

const DataDisplayPage: React.FC = () => {
  return (
    <MainContainer maxWidth="xl">
      <MainPaper elevation={0}>
        <Fade in timeout={800}>
          <GradientTitle variant="h3" sx={{
            background: 'linear-gradient(45deg, #667eea 0%, #764ba2 50%, #f093fb 100%)',
            backgroundSize: '200% 200%',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            backgroundClip: 'text',
            animation: `${shimmer} 3s ease-in-out infinite`,
            textShadow: '0 0 30px rgba(102, 126, 234, 0.3)',
          }}>
            🧠 脑肿瘤MRI图像数据集分析
          </GradientTitle>
        </Fade>

        <Grow in timeout={1000}>
          <Box my={5}>
            <Typography 
              variant="h4" 
              component="h2" 
              gutterBottom 
              sx={{ 
                color: '#2d3748',
                fontWeight: 700,
                mb: 3,
                display: 'flex',
                alignItems: 'center',
                gap: 2
              }}
            >
              <Assessment sx={{ color: '#667eea', fontSize: 40 }} />
              数据集概览
            </Typography>
            
            <Typography 
              variant="h6" 
              sx={{ 
                color: '#4a5568',
                lineHeight: 1.8,
                mb: 4,
                background: 'linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%)',
                padding: 3,
                borderRadius: '12px',
                border: '1px solid rgba(255,255,255,0.2)',
                boxShadow: '0 4px 16px rgba(0,0,0,0.05)'
              }}
            >
              本项目采用高质量的脑部MRI图像数据集，包含 <strong style={{color: '#667eea'}}>7,023张</strong> 专业医学影像，
              涵盖四个关键类别的脑部病理状态。数据集整合了figshare、SARTAJ和Br35H三个权威医学数据源，
              确保了数据的多样性和临床代表性。
            </Typography>

            {/* 统计数据卡片 */}
            <Grid container spacing={3} sx={{ mb: 5 }}>
              {datasetStats.map((stat, index) => (
                <Grid size={{ xs: 12, sm: 6, md: 3 }} key={stat.name}>
                  <Fade in timeout={1200 + index * 200}>
                    <StatsCard>
                      <Box sx={{ textAlign: 'center' }}>
                        <Typography 
                          variant="h3" 
                          sx={{ 
                            color: stat.color,
                            fontWeight: 800,
                            mb: 1,
                            animation: `${pulse} 2s infinite`
                          }}
                        >
                          {stat.value.toLocaleString()}
                        </Typography>
                        <Typography variant="h6" sx={{ color: '#2d3748', fontWeight: 600, mb: 1 }}>
                          {stat.name}
                        </Typography>
                        <Chip 
                          label={stat.shortName}
                          sx={{ 
                            backgroundColor: `${stat.color}20`,
                            color: stat.color,
                            fontWeight: 600,
                            mb: 1
                          }}
                        />
                        <Typography variant="body2" sx={{ color: '#718096', mt: 1 }}>
                          {stat.description}
                        </Typography>
                      </Box>
                    </StatsCard>
                  </Fade>
                </Grid>
              ))}
            </Grid>

            {/* 数据可视化图表 */}
            <Grid container spacing={4} alignItems="stretch">
              <Grid size={{ xs: 12, lg: 6 }}>
                <ChartContainer>
                  <Typography 
                    variant="h6" 
                    component="h3" 
                    gutterBottom
                    sx={{ 
                      color: '#2d3748',
                      fontWeight: 700,
                      mb: 3,
                      display: 'flex',
                      alignItems: 'center',
                      gap: 1
                    }}
                  >
                    <Analytics sx={{ color: '#667eea' }} />
                    样本分布饼图
                  </Typography>
                  <ResponsiveContainer width="100%" height="85%">
                    <PieChart>
                      <Pie
                        data={datasetStats}
                        cx="50%"
                        cy="50%"
                        labelLine={false}
                        outerRadius={120}
                        fill="#8884d8"
                        dataKey="value"
                        label={({ name, percent }) => `${name}\n${(percent! * 100).toFixed(1)}%`}
                      >
                        {datasetStats.map((entry, index) => (
                          <Cell key={`cell-${index}`} fill={entry.color} />
                        ))}
                      </Pie>
                      <Tooltip 
                        formatter={(value: any) => [value.toLocaleString(), '样本数量']}
                        contentStyle={{
                          backgroundColor: 'rgba(255,255,255,0.95)',
                          border: 'none',
                          borderRadius: '12px',
                          boxShadow: '0 8px 32px rgba(0,0,0,0.1)'
                        }}
                      />
                      <Legend 
                        wrapperStyle={{
                          paddingTop: '20px'
                        }}
                      />
                    </PieChart>
                  </ResponsiveContainer>
                </ChartContainer>
              </Grid>

              <Grid size={{ xs: 12, lg: 6 }}>
                <ChartContainer>
                  <Typography 
                    variant="h6" 
                    component="h3" 
                    gutterBottom
                    sx={{ 
                      color: '#2d3748',
                      fontWeight: 700,
                      mb: 3,
                      display: 'flex',
                      alignItems: 'center',
                      gap: 1
                    }}
                  >
                    <Assessment sx={{ color: '#667eea' }} />
                    样本数量对比
                  </Typography>
                  <ResponsiveContainer width="100%" height="85%">
                    <BarChart data={datasetStats} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
                      <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
                      <XAxis 
                        dataKey="shortName" 
                        tick={{ fill: '#4a5568', fontSize: 12 }}
                        axisLine={{ stroke: '#e2e8f0' }}
                      />
                      <YAxis 
                        tick={{ fill: '#4a5568', fontSize: 12 }}
                        axisLine={{ stroke: '#e2e8f0' }}
                      />
                      <Tooltip 
                        formatter={(value: any) => [value.toLocaleString(), '样本数量']}
                        contentStyle={{
                          backgroundColor: 'rgba(255,255,255,0.95)',
                          border: 'none',
                          borderRadius: '12px',
                          boxShadow: '0 8px 32px rgba(0,0,0,0.1)'
                        }}
                      />
                      <Bar dataKey="value" radius={[8, 8, 0, 0]}>
                        {datasetStats.map((entry, index) => (
                          <Cell key={`cell-${index}`} fill={entry.color} />
                        ))}
                      </Bar>
                    </BarChart>
                  </ResponsiveContainer>
                </ChartContainer>
              </Grid>
            </Grid>
          </Box>
        </Grow>

        <Fade in timeout={1400}>
          <Box my={5}>
            <Typography 
              variant="h4" 
              component="h2" 
              gutterBottom 
              sx={{ 
                color: '#2d3748',
                fontWeight: 700,
                mb: 4,
                display: 'flex',
                alignItems: 'center',
                gap: 2
              }}
            >
              <Biotech sx={{ color: '#667eea', fontSize: 40 }} />
              数据预处理流程
            </Typography>

            <Grid container spacing={3}>
              {[
                {
                  title: '🔧 图像尺寸标准化',
                  description: '统一调整为224×224像素，确保模型输入一致性',
                  details: '采用双线性插值算法，保持图像质量的同时满足深度学习模型的输入要求',
                  icon: '📐'
                },
                {
                  title: '🎨 数据增强技术',
                  description: '随机变换提升模型泛化能力',
                  details: '包括随机水平翻转、旋转(±10°)、亮度调整等多种增强策略',
                  icon: '🔄'
                },
                {
                  title: '⚖️ 数据归一化',
                  description: 'ImageNet标准化预处理',
                  details: '使用ImageNet数据集的均值和标准差进行Z-score标准化',
                  icon: '📊'
                },
                {
                  title: '🔢 张量格式转换',
                  description: 'PyTorch张量格式适配',
                  details: '将PIL图像转换为PyTorch张量，支持GPU加速计算',
                  icon: '⚡'
                }
              ].map((method, index) => (
                <Grid size={{ xs: 12, sm: 6 }} key={index}>
                  <Fade in timeout={1600 + index * 200}>
                    <MethodCard>
                      <CardContent sx={{ p: 0 }}>
                        <Box sx={{ p: 3 }}>
                          <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
                            <Typography sx={{ fontSize: '2rem', mr: 2 }}>
                              {method.icon}
                            </Typography>
                            <Typography 
                              variant="h6" 
                              component="h4" 
                              sx={{ 
                                color: '#2d3748',
                                fontWeight: 700,
                                flex: 1
                              }}
                            >
                              {method.title}
                            </Typography>
                          </Box>
                          <Typography 
                            variant="body1" 
                            sx={{ 
                              color: '#4a5568',
                              mb: 2,
                              fontWeight: 500
                            }}
                          >
                            {method.description}
                          </Typography>
                          <Typography 
                            variant="body2" 
                            sx={{ 
                              color: '#718096',
                              lineHeight: 1.6
                            }}
                          >
                            {method.details}
                          </Typography>
                        </Box>
                      </CardContent>
                    </MethodCard>
                  </Fade>
                </Grid>
              ))}
            </Grid>
          </Box>
        </Fade>

        <Fade in timeout={1800}>
          <Box my={5}>
            <Typography 
              variant="h4" 
              component="h2" 
              gutterBottom 
              sx={{ 
                color: '#2d3748',
                fontWeight: 700,
                mb: 3,
                display: 'flex',
                alignItems: 'center',
                gap: 2
              }}
            >
              <Psychology sx={{ color: '#667eea', fontSize: 40 }} />
              样本图像展示
            </Typography>
            
            <Typography 
              variant="h6" 
              sx={{ 
                color: '#4a5568',
                lineHeight: 1.8,
                mb: 4,
                background: 'linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%)',
                padding: 3,
                borderRadius: '12px',
                border: '1px solid rgba(255,255,255,0.2)',
                boxShadow: '0 4px 16px rgba(0,0,0,0.05)'
              }}
            >
              以下展示训练集中的代表性MRI图像样本，每张图像都经过专业医师标注，
              确保了数据的准确性和可靠性。鼠标悬停可查看详细信息。
            </Typography>

            {/* 样本图像网格 */}
            <Grid container spacing={3}>
              {[
                { id: 1, category: '胶质瘤', english: 'Glioma', color: '#FF6B6B', imageUrl: 'brain-tumor-mri-dataset/glioma/Te-gl_0010.jpg', details: '胶质瘤是一种起源于脑神经胶质细胞的肿瘤，是最常见的原发性脑肿瘤。' },
                { id: 2, category: '脑膜瘤', english: 'Meningioma', color: '#4ECDC4', imageUrl: 'brain-tumor-mri-dataset/meningioma/Te-me_0010.jpg', details: '脑膜瘤起源于脑膜细胞，通常是良性肿瘤，生长缓慢但可能压迫脑组织。' },
                { id: 3, category: '无肿瘤', english: 'No Tumor', color: '#45B7D1', imageUrl: 'brain-tumor-mri-dataset/notumor/Te-no_0010.jpg', details: '正常脑部MRI图像，无肿瘤或其他异常病理变化。' },
                { id: 4, category: '垂体瘤', english: 'Pituitary', color: '#96CEB4', imageUrl: 'brain-tumor-mri-dataset/pituitary/Te-pi_0010.jpg', details: '垂体瘤是发生在垂体腺的肿瘤，可能影响激素分泌，导致内分泌功能紊乱。' },
                { id: 5, category: '胶质瘤', english: 'Glioma', color: '#FF6B6B', imageUrl: 'brain-tumor-mri-dataset/glioma/Te-gl_0011.jpg', details: '胶质瘤MRI图像示例，显示肿瘤区域与周围正常脑组织的对比。' },
                { id: 6, category: '脑膜瘤', english: 'Meningioma', color: '#4ECDC4', imageUrl: 'brain-tumor-mri-dataset/meningioma/Te-me_0011.jpg', details: '脑膜瘤MRI图像示例，通常表现为边界清晰的圆形或椭圆形肿块。' },
                { id: 7, category: '无肿瘤', english: 'No Tumor', color: '#45B7D1', imageUrl: 'brain-tumor-mri-dataset/notumor/Te-no_0011.jpg', details: '正常脑部MRI图像样本，脑组织结构清晰，无异常信号区域。' },
                { id: 8, category: '垂体瘤', english: 'Pituitary', color: '#96CEB4', imageUrl: 'brain-tumor-mri-dataset/pituitary/Te-pi_0011.jpg', details: '垂体瘤MRI图像示例，显示鞍区占位性病变，可能影响视交叉。' },
              ].map((image, index) => (
                <Grid size={{ xs: 12, sm: 6, md: 3 }} key={image.id}>
                  <Fade in timeout={2000 + index * 150}>
                    <ImageCard>
                      <Box 
                        sx={{ 
                          position: 'relative', 
                          overflow: 'hidden',
                          height: '280px',
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center'
                        }}
                      >
                        <CardMedia
                          component="img"
                          image={image.imageUrl}
                          alt={image.category}
                          sx={{ 
                            width: '100%',
                            height: '100%',
                            objectFit: 'cover',
                            transition: 'transform 0.4s ease',
                            '&:hover': {
                              transform: 'scale(1.1)'
                            }
                          }}
                        />
                        <ImageOverlay className="image-overlay">
                          <Box sx={{ textAlign: 'center', padding: 2 }}>
                            <Typography variant="h6" sx={{ fontWeight: 700, mb: 1 }}>
                              {image.english}
                            </Typography>
                            <Typography variant="body2" sx={{ mb: 2, maxWidth: '300px' }}>
                              {image.details}
                            </Typography>
                            <Chip 
                              label="点击查看详情"
                              sx={{ 
                                backgroundColor: 'rgba(255,255,255,0.2)',
                                color: 'white',
                                fontWeight: 600
                              }}
                            />
                          </Box>
                        </ImageOverlay>
                      </Box>
                      <CardContent sx={{ p: 2.5 }}>
                        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                          <Typography 
                            variant="h6" 
                            sx={{ 
                              color: '#2d3748',
                              fontWeight: 600
                            }}
                          >
                            {image.category}
                          </Typography>
                          <Chip 
                            label={image.english}
                            size="small"
                            sx={{ 
                              backgroundColor: `${image.color}20`,
                              color: image.color,
                              fontWeight: 600
                            }}
                          />
                        </Box>
                      </CardContent>
                    </ImageCard>
                  </Fade>
                </Grid>
              ))}
            </Grid>
          </Box>
        </Fade>
      </MainPaper>
    </MainContainer>
  );
};

export default DataDisplayPage;